<script>
    import {mapState, mapMutations} from "vuex";

    export default {
        name: 'CommonTag',
        data() {
            return {

            }
        },
        computed: {
            ...mapState({
                tags: state => state.tab.tabsList,
            })
        },
        methods: {
            ...mapMutations(['closeTag']),
            // 点击tag跳转的功能
            changeMenu(item) {
                this.$router.push({name: item.name});
            },
            // 点击删除tag标签
            handleClose(item, index) {
                // 调用store中的mutations
                this.closeTag(item);
                const length = this.tags.length;
                // 删除之后的跳转逻辑
                if (item.name !== this.$route.name) {
                    return ;
                }
                // 表示删除最后一项
                if (index === length) {
                    this.$router.push({
                        name: this.tags[index - 1].name
                    })
                } else {
                    this.$router.push({
                        name: this.tags[index].name,
                    })
                }
            }
        }
    }
</script>

<template>
    <div class="tags">
        <el-tag
            v-for="(item, index) in tags"
            :key="item.label"
            :closable="item.name!=='home'"
            :effect="$route.name === item.name ? 'dark' : 'plain'"
            @click="changeMenu(item)"
            @close="handleClose(item, index)"
            size="small"
        >
            {{ item.label }}
        </el-tag>
    </div>
</template>

<style scoped lang="less">
    .tags {
        padding: 20px;

        .el-tag {
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style>